<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Page Turn</title>

        <link href="example.css" media="screen" rel="stylesheet" type="text/css" />
        
        <script src="../lib/jquery-1.4.min.js" type="text/javascript"></script>
        <script src="../lib/css_page_flip.js" type="text/javascript"></script>
        <link href="../lib/css_page_flip.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h1>You'll need to be on the latest Safari or iPhone to see this in action</h1>
        <div id="container">
            <ol id="pages">
                <li>
                    <h1>Look, pure CSS Animations!</h1>
                    <p align="center">
                        <img src="http://farm3.static.flickr.com/2693/4126819117_461c323a24_m.jpg">
                    </p>
                    <p>Mauris porttitor commodo metus, non ultricies enim tristique ac. Maecenas neque neque, ultrices quis mollis ac, volutpat non nibh. Cras tincidunt sollicitudin sapien in sagittis. Mauris lobortis dignissim eleifend. Ut felis nisl, mattis sed convallis in, fermentum commodo nequ</p>
                </li>
                <li>
                    <h1>Page 2</h1>
                    
                    <p>at nunc nunc, vel accumsan neque. Etiam facilisis, tellus vel feugiat tristique, nisl tortor pretium velit, et consequat erat est sit amet odio. Nam sed nisi orci. Aenean pulvinar sapien ultrices neque faucibus pellentesque. Donec consectetur malesuada risus, eu aliquam est imperdiet sit amet.</p>
                    
                    <p align="center">
                        <img src="http://farm4.static.flickr.com/3495/4041303223_4b650b839e_m.jpg">
                    </p>

                    <p>Mauris porttitor commodo metus, non ultricies enim tristique ac. Maecenas neque neque, ultrices quis mollis ac, volutpat non nibh. Cras tincidunt sollicitudin sapien in sagittis. Mauris lobortis dignissim eleifend. Ut felis nisl, mattis sed convallis in, fermentum commodo nequ</p>
                </li>
                <li>
                    <h1>Page 3</h1>
                    <p>at nunc nunc, vel accumsan neque. Etiam facilisis, tellus vel feugiat tristique, nisl tortor pretium velit, et conseqonsectetur malesuada risus, eu aliquam est imperdiet sit amet.</p>

                    <p align="center">
                        <img src="http://farm3.static.flickr.com/2663/3967160213_b9b522c0c5_m.jpg">
                    </p>

                    <p> non nibh. Cras tincidunt sollicitudin sapien in sagittis. Mauris lobortis dignissim eleifend. Ut felis nisl, mattis sed convallis in, fermentum commodo nequ</p>
                </li>
                <li>
                    <h1>Page 4</h1>
                    <p>at nunc nunc, vel accesuada risus, eu aliquam est imperdiet sit amet.</p>

                    <p align="center">
                        <img src="http://farm4.static.flickr.com/3430/3967934620_e169001e55_m.jpg">
                    </p>
                    
                    <p>Mauris porttitor commodo metus, non ultricies enim tristique ac. Maecenas neque neque, ultrices quis mollis ac, volutpat noallis in, fermentum commodo nequ</p>
                </li>
                <li>
                    <h1>Page 5</h1>
                    <p>at nunc nunc, vel accumsan neque. Etiam facilisis, tellus vel feugiat tristique, nisl tortor pretium velit, et consequat erat est sit amet odio. Nam sed nisi orci. Aenean pulvinar sapien ultrices neque faucibus pellentesque. Donec consectetur malesuada risus, eu aliquam est imperdiet sit amet.</p>
                    
                    <p align="center">
                        <img src="http://farm4.static.flickr.com/3462/3967159681_dc1af49c6d_m.jpg">
                    </p>

                    <p>lutpat non nibh. Cras tincidunt sollicitudin sapien in sagittis. Mauris lobortis dignissim eleifend. Ut felis nisl, mattis sed convallis in, fermentum commodo nequ</p>
                </li>
                <li>
                    <h1>Page 6</h1>
                    <p>at nunc nunc, vel accumsan neque. Etiam facilisis, tellus vel feugiat tristique, nisl tortor pretium velit, et consequat erat est sit onec consectetur malesuada risus, eu aliquam est imperdiet sit amet.</p>
                    
                    <p align="center">
                        <img src="http://farm4.static.flickr.com/3439/3967159053_b0a28e618e_m.jpg">
                    </p>

                    <p>Mauris porttitor Cras tincidunt sollicitudin sapien in sagittis. Mauris lobortis dignissim eleifend. Ut felis nisl, mattis sed convallis in, fermentum commodo nequ</p>
                </li>
            </ol>
        </div>
        
        <script>
            CSSPageFlip.init('pages');
        </script>
    </body>
</html>